<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 如果没加小括号，函数默认就有个参数，参数就是事件对象 -->
        <button @click="fn">点我啊</button>

        <!-- 在vue中绑定事件时，如果加了小括号，就代表我要自己手动给这个函数传参 -->
        <!-- 你传什么他就是什么，如果你毛都没传，那么参数就是undefined -->
        <button @click="fn2()">点我啊2</button>
        <!-- 如果传10，参数就是10 -->
        <button @click="fn3(10)">点我啊3</button>
        <!-- 我既想自己传参，又想拿到事件对象，要手动传递事件对象，就要传一个$event -->
        <!-- 参数1：999 -->
        <!-- 参数2：事件对象（也就是说在vue中的行内用$event代表事件对象） -->
        <button @click="fn4(999, $event)">点我啊4</button>
        <button @click="fn5($event)">点我啊5</button>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            methods: {
                fn (e) {
                    console.log('fn被调用', e) // 事件对象
                },
                fn2 (e) {
                    console.log('fn2被调用', e) // undefined
                },
                fn3 (e) {
                    console.log('fn3被调用', e) // 10
                },
                fn4 (num1, e) {
                    console.log('fn4被调用',num1, e) // 999 事件对象
                },
                fn5 (num1, e) {
                    console.log('fn5被调用',num1, e) // 事件对象 undefined
                }
            }
        })
    </script>
</body>
</html>